<template lang="pug">
  el-dialog.address-dialog(
    title="添加或更新地址"
    :visible.sync="showModal"
    width="30%"
    :before-close="beforeCloseHandler")
    .region-wrap
      .input-group
        span 省/市/区(县)
        region-picker(
          :placeholder="{province: '选择省份', city: '选择城市', district: '选择地区'}",
          :province="region.province",
          :city="region.city",
          :district="region.district",
          @onchange="change")
      .input-group.mt10
        span 详细地址
        el-input(v-model="addrDetail" placeholder="请输入街道地址")
      .input-group.mt10
        span 姓名
        el-input(v-model="addrName" placeholder="请输入姓名")
      .input-group.mt10
        span 手机号码
        el-input(v-model="addrPhone" placeholder="请输入手机")
      el-button(type="default" @click="handleAddressSave") 保存
</template>

<script>

import modalMixin from '@/mixins/modal'
export default {
  name: 'addrModal',
  mixins: [modalMixin],
  data() {
    return {
      addrItem: {},
      title: '',
      region: {},
      addrDetail: '',
      addrName: '',
      addrPhone: '',
    }
  },
  mounted() {
    this.$vgo.on('model:address', () => {
      this.openModal()
      this.region.province = ''
      this.region.city = ''
      this.region.district = ''
    })

    this.$vgo.on('address:editor', data => {
      for(let key in data) {
        this.addrItem[key] = data[key]
      }

      this.region.province = this.addrItem.province
      this.region.city = this.addrItem.city.split(' ')[0]
      this.region.district = this.addrItem.city.split(' ')[1]
      this.addrDetail = this.addrItem.address
      this.addrName = this.addrItem.name
      this.addrPhone = this.addrItem.mobile
      this.openModal()
    })
  },
  methods: {
    change(val) {
      this.region = val
    },
    handleAddressSave() {
      if(!this.region.province) {
        this.$vgo.tip('省份未选择', 'warning')
        return
      }
      if(!this.region.city) {
        this.$vgo.tip('城市未选择', 'warning')
        return
      }
      if(!this.region.district) {
        this.$vgo.tip('区县未选择', 'warning')
        return
      }
      if(!this.addrDetail) {
        this.$vgo.tip('街道地址未填写', 'warning')
        return
      }
      if(!this.addrName) {
        this.$vgo.tip('姓名未填写', 'warning')
        return
      }
      if(!this.addrPhone) {
        this.$vgo.tip('手机号码未填写', 'warning')
        return
      }

      if(!(/^1(3|4|5|7|8)\d{9}$/.test(this.addrPhone))){
        this.$vgo.tip('手机号码有误', 'warning')
        return
      }

      let options = {
        addressid: this.addrItem ? this.addrItem.addressid : 0,
        province: this.region.province,
        city: this.region.city + ' ' + this.region.district,
        number: '',
        address: this.addrDetail,
        name: this.addrName,
        mobile: this.addrPhone,
      }

      this.$store.dispatch('addOrUpdateAddress', options)
      this.closeModal()
    },
    beforeCloseHandler() {
      this.closeModal()
    },
    closeModal() {
      this.showModal = false
      this.clean()
    },
    clean() {
      this.addrItem = {}
      this.title = ''
      this.region = {}
      this.addrDetail = ''
      this.addrName = ''
      this.addrPhone = ''
    }
  }
}
</script>

<style lang="stylus">
.region-wrap
  .region-picker
    label
      select
        width: 100%
        height: 40px
        margin-top: 10px
        font-size: 14px
        text-indent: 12px
        border-color: #dcdfe6
        border-radius: 4px
        color: #606266
        option
          line-height: 40px
          color: #606266
  .el-input
    margin-top: 5px
  .el-button
    margin-top: 20px
    width: 100%
</style>
